<!DOCTYPE html>
<html style="100%">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>ECharts</title>

    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
    <!-- 引入 自定义主题customed -->
<!--    <script src="walden.js"></script>-->
</head>
<body style="margin:0 auto;width:100%">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 100%;height:100%;margin:0 auto;"></div>
<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
 tooltip: {
        formatter: '{b} : {c}'
    },
      grid: {
       left: '0',
        right: '0',
        bottom: '0',
        top: '0',
    },
    series: [
        {
            name: 'AQI',
            type: 'gauge',
            radius:'100%',
            splitNumber:'5',
            max:'500',
             axisLine: {
			            lineStyle: {
			                width:10,
			                color:[[0.1,'#8c929d'],[0.2,'#FFFF00'],[0.3,'#FF7E00'],
			                [0.4,'#FF0000'],[0.6,'#99004C'],[1,'#7E0023']]
			            }
			        },
			         splitLine: {
			            length: 0,
			            lineStyle:{
			                color:'#8c929d',
			                width:12
			            }
			        },
			        axisLabel: {
			            show:false,
			            distance:'10'
			        },
			        axisTick:{
			            show:false
			        },
            detail: {
             textStyle: {
		                    color: '#5bdbff',
		                    fontSize:12
		               }
            },
            data: [{value: 50, name: 'AQI'}]
        }
    ]
};
        // 使用刚指定的配置项和数据显示图表。
       option.series[0].data[0].value = 140;
        myChart.setOption(option, true);

        function initData(value){
            option.series[0].data[0].value = value;
            myChart.setOption(option, true);
             //获取数据之后重新绘制布局
            myChart.resize();
        }
</script>
</body>
</html>